<template>
    <div class="person">
        <h2>{{ a }}</h2>
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }} - {{ item.age }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="Person">
    // defineXxx属于宏函数，不需要import就能使用，因此这里defineProps就不用import了
    import { withDefaults } from 'vue';
    import { type Persons } from '@/types';

    // 只接收a
    // defineProps(['a']);

    // 接收a，同时把props保存起来
    // let x = defineProps(['a', 'list']);
    // console.log(x);

    // 接收list，并且限制类型
    // defineProps<{ a: string, list: Persons }>();

    // 接收list，并且限制类型，而且设置必要性（?代表该参数可有可无）
    // defineProps<{ a: string, list?: Persons }>();
    // v-for在识别到list为空时，就不会执行（ul里没有li）

    // 接收list，并且限制类型，而且设置必要性，最后设置默认值
    withDefaults(defineProps<{ a: string, list?: Persons }>(), {
        list: () => [{ id: '001', name: '康师傅·王麻子·特仑苏', age: 34 }]
    });
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>